<template>
  <div class="product">
    <!-- 搜索框 -->
    <div class="search">
      <template>
        <el-select
          v-model="searchValue"
          filterable
          clearable
          reserve-keyword
          remote
          placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
          :loading="loading"
        >
          <el-option value="a"> </el-option>
        </el-select>
      </template>
      <!-- 搜索按钮 -->
      <el-button type="primary" icon="el-icon-search" plain> </el-button>
      <!-- 添加按钮 -->
      <el-button type="primary" @click="addStu" v-has="'add'">添加项目</el-button>
    </div>
    <!-- 班级选择 -->
    <div class="select-class">
      <!-- 框框 -->
      <el-form>
        <el-form-item label="选择班级:">
          <el-select
            filterable
            placeholder="请选择"
            v-model="classes"
            @change="classChange"
            @visible-change="classVisible"
          >
            <el-option label="全部" value="all"></el-option>
            <el-option
              v-for="(item, index) in classList"
              :key="index"
              :value="item"
              :lable="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <div class="stu-table">
      <el-table :data="stuData" border style="width: 100%" v-loading="loading">
        <el-table-column
          prop="headimgurl"
          align="center"
          label="头像"
          width="100"
        >
          <!-- 插槽作用域 -->
          <template v-slot="scope">
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="scope.row.headimgurl"
            ></el-avatar>
          </template>
          <!-- <img :src="item.headimgurl" alt="" v-for="item in this.stuData" :key="item.age"> -->
        </el-table-column>
        <el-table-column prop="name" align="center" width="120" label="姓名">
        </el-table-column>
        <el-table-column prop="degree" align="center" label="学历">
        </el-table-column>
        <el-table-column prop="class" align="center" label="班级">
        </el-table-column>
        <el-table-column prop="productUrl" align="center" label="项目">
        </el-table-column>
        <el-table-column prop="cTime" align="center" label="创建时间">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" class="btn" icon="el-icon-view" v-has="'read'"
            @click="$router.push({path:'/StudentManager/profill'})"
              >查看</el-button
            >
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-edit"
              @click="editStu(row)"
              v-has="'edit'"
              >编辑</el-button
            >
            <el-button
              v-has="'delete'"
              type="danger"
              class="btn"
              icon="el-icon-delete"
              @click="deleteStu(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <qfdialog></qfdialog>
  </div>
</template>

<script>
import * as api from "../../../../api/index";
import qfdialog from "../../../../components/Dialog";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["stuData", "loading"]),
  },
  created() {
    this.GET_STULIST(); // 获取学员信息列表
    console.log(this.stuData);
  },
  components: {
    qfdialog,
  },
  methods: {
    ...mapActions(["GET_STULIST"]),
    ...mapMutations([
      "SHOW_DIALOG",
      "HIDE_DIALOG",
      "CHANGE_DIALOG_TITLE",
      "SET_CURRENT_ROW",
    ]),
    // 班级选择框 展开收起触发事件
    classVisible(isvisible) {
      if (isvisible) {
        //下拉框出现发送请求，获取列表
        api.getClassesApi().then((res) => {
          // console.log(res);
          if (res.data.state) {
            //请求成功
            this.classList = res.data.data;
          }
        });
      }
    },
    //选择班级
    classChange(query) {
      //当query等于all的时候,表示要展示所有的班级
      if (query === "all") {
        query = ""; //将query重新赋值为空 因为不传的话 后台就默认返回所有数据
      }
      this.GET_STULIST({ classes: query });
    },
    addStu() {
      //修改dialog标题
      this.CHANGE_DIALOG_TITLE("添加学员信息");
      // 弹出dialog
      this.SHOW_DIALOG();
    },
    // 编辑学员
    editStu(row) {
      //修改dialog标题
      this.CHANGE_DIALOG_TITLE("编辑学员信息");
      // 弹出dialog
      this.SHOW_DIALOG();
      //将当期这行的数据回显到dialog弹出框中 通过vuex修改currentRow的值
      this.SET_CURRENT_ROW(row);
    },
    // 删除学员信息
    deleteStu(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.delStuApi(row.sId).then((res) => {
            if (res.data.state) {
              this.GET_STULIST(); //删除成功，更新视图
              // 删除成功
              this.$message.error({
                type: "success",
                message: "删除成功",
              });
            } else {
              // 删除失败，被别人删除
              this.$message.error("删除失败，或者数据不存在");
            }
          });
        })
        .catch(() => {});
    },
  },
  data() {
    return {
      classes: "", //select绑定的班级
      classList: [], //班级列表
      searchValue: "",
    };
  },
};
</script>

<style scoped lang="less">
.search {
  line-height: 60px;
  text-align: left;
  margin: 20px 0;
  /deep/ .el-input__inner {
    width: 300px;
  }
}

.select-class {
  line-height: 40px;
  text-align: left;
  margin-bottom: 20px;
}
.stu-table .btn {
  width: 65px;
  height: 25px;
  padding: 0;
}
.pagination {
  margin-top: 20px;
}
/deep/ .exportExcel i.icon-excel {
  color: green;
  font-size: 20px;
  margin-right: 3px;
}

.exportExcel .el-button {
  padding: 4px 7px;
  float: right;
}
.exportExcel {
  margin-bottom: 10px;
  overflow: hidden;
}
</style>